<template>
  <view class="content">
    <view class="g-header">
    </view>
    <view class="innerPre">
      <view class="g-page-header-wrap g-page-header-wrap-white hide_hide">
        <view class="g-page-header-pre"></view>
        <view class="g-page-header">
          <view class="g-page-header-btn g-page-header-back"></view>
          <view class="g-page-header-title">订单详情</view>
          <view class="g-page-header-btn"></view>
        </view>
      </view>
    </view>
    <view class="inner">
      <view class="odStatus">
        <view class="odStatus1">待服务</view>
        <view class="odStatusIcon" :class="{odStatusIcon1:1}"></view>
      </view>

      <view class="worker">
        <view class="workerIcon"></view>
        <view class="workerName">王师傅</view>
        <view class="workerPhone">
          <view class="workerPhone1"></view>
          <view class="workerPhone2">联系师傅</view>
        </view>
      </view>
      <view class="statusList">
        <view class="statusLi" :class="{statusLiActive:'1'}">
          <view class="status1">
            <view class="status1Icon"></view>
            <view class="status1Title">待服务</view>
            <view class="status1Time">2020-04-03 12:30</view>
          </view>
          <view class="status2">
            <view class="status21">维修人员正在飞奔而来，请注意接听电话</view>
          </view>
        </view>
        <view class="statusLi">
          <view class="status1">
            <view class="status1Icon"></view>
            <view class="status1Title">待服务</view>
            <view class="status1Time">2020-04-03 12:30</view>
          </view>
          <view class="status2">
            <view class="status21">维修人员正在飞奔而来，请注意接听电话</view>
          </view>
        </view>
      </view>

      <view class="odBlock">
        <view class="odTitle">服务信息</view>
        <view class="odBlock1">
          <view class="odBlock1Icon"></view>
          <view class="odBlock1Content">
            <view class="odBlock1Content1">双舱智水座</view>
            <view class="odBlock1Content2">ID:SZ15464</view>
          </view>
        </view>
        <view class="odInfo">
          <view class="odInfoLabel">联系人：</view>
          <view class="odInfoValue">张小凡</view>
        </view>
        <view class="odInfo">
          <view class="odInfoLabel">联系方式：</view>
          <view class="odInfoValue">15151513537</view>
        </view>
        <view class="odInfo">
          <view class="odInfoLabel">预约时间：</view>
          <view class="odInfoValue">2022-05-05 10:30</view>
        </view>
        <view class="odInfo">
          <view class="odInfoLabel">服务地址：</view>
          <view class="odInfoValue">广东省深圳市大鹏新区葵涌街道延安路一号</view>
        </view>
        <view class="odInfo">
          <view class="odInfoLabel">故障描述：</view>
          <view class="odInfoValue">机器无法正常出水，设备发出异常声音</view>
        </view>


        <view class="odBtnWrap">
          <view class="odBtn">取消服务</view>
        </view>
      </view>
      <view class="odBlock">
        <view class="odTitle">订单信息</view>
        <view class="odInfo">
          <view class="odInfoLabel">订单编号：</view>
          <view class="odInfoValue">65255213489463</view>
        </view>
        <view class="odInfo">
          <view class="odInfoLabel">创建时间：</view>
          <view class="odInfoValue">2020-04-01 22:23:39</view>
        </view>
      </view>
    </view>
    <view class="innerNext">
    </view>
  </view>
</template>

<script>
import * as util from '@/common/util'
import _ from 'lodash'

export default {
  components: {},
  data(){
    return {
      title: 'Hello',
      list: [],
    }
  },
  onLoad(){
    this.id = this.$Route.query.id
    console.log(`this.id`, this.id)
  },
  onShow(){},
  mounted(){},
  onReady(){},
  methods: {},
}
</script>
<style lang="scss">


page {
  background-color: #F7F9FB;
}

.innerPre {
  padding: 24px;
  width: 750px;
  height: 632px;
  background: linear-gradient(180deg, rgba(39, 136, 255, 0.949999988079071) 0%, rgba(23, 127, 255, 0.699999988079071) 52%, rgba(136, 187, 250, 0.8523921966552734) 71%, rgba(209, 226, 248, 0.9498234391212463) 85%, #F7F7F7 100%);
  border-radius: 0px 0px 0px 0px;
  opacity: 1;

}

.inner {
  padding: 24px;

  margin-top: -600px;

}

.innerNext {

}

.odStatus {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .odStatus1 {
    font-size: 48px;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 72px;
  }
  .odStatusIcon {
    width: 200px;
    height: 175px;
    border-radius: 25px 25px 25px 25px;
    opacity: 1;
    margin-right: 24px;

    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;
  }
  .odStatusIcon1 {
    background-image: url(#{$bgPath}/icon_order_detail_status_1.png);
  }
  .odStatusIcon2 {
    background-image: url(#{$bgPath}/icon_order_detail_status_2.png);
  }
  .odStatusIcon3 {
    background-image: url(#{$bgPath}/icon_order_detail_status_3.png);
  }
  .odStatusIcon4 {
    background-image: url(#{$bgPath}/icon_order_detail_status_4.png);
  }
}

.worker {
  background: #FFFFFF;
  border-radius: 16px 16px 16px 16px;
  opacity: 1;

  display: flex;
  align-items: center;

  padding: 24px;

  .workerIcon {
    width: 64px;
    height: 64px;
    opacity: 1;


    background-image: url(#{$bgPath}/icon_order_user.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;

  }
  .workerName {
    margin-left: 20px;
    font-size: 32px;
    font-weight: 400;
    color: #000000;
    line-height: 48px;
  }
  .workerPhone {
    margin-left: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    .workerPhone1 {
      width: 33px;
      height: 33px;
      opacity: 1;

      background-image: url(#{$bgPath}/icon_phone.png);
      background-repeat: no-repeat;
      background-position: center center;
      background-size: 100% 100%;

    }
    .workerPhone2 {
      margin-left: 20px;
      font-size: 28px;
      font-weight: 400;
      color: #000000;
      line-height: 44px;
    }
  }
}

// /pages/user/orderDetail?id=1111
.statusList {
  background: #FFFFFF;
  border-radius: 16px 16px 16px 16px;
  opacity: 1;
  padding: 24px;

  margin-top: 24px;
  margin-bottom: 24px;
  .statusLi {
    &.statusLiActive {
      .status1 {
        .status1Icon {
          background-image: url(#{$bgPath}/icon_select_04.png);
        }
      }
      .status2 {
        color: rgba(0, 0, 0, 0.8);
      }

    }
    .status1 {
      display: flex;
      align-items: center;
      .status1Icon {
        width: 32px;
        height: 32px;

        background-image: url(#{$bgPath}/icon_select_03.png);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 100% 100%;

        opacity: 1;
      }
      .status1Title {
        font-size: 32px;
        font-weight: 500;
        color: #000000;
        line-height: 48px;

        margin-left: 20px;
      }
      .status1Time {
        margin-left: auto;
        font-size: 24px;
        font-family: MiSans-Regular, MiSans;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.5);
        line-height: 36px;
      }
    }

    .status2 {
      margin: 20px;
      padding-left: 20px;
      border-left: 2px solid lightgrey;
      min-height: 40px;
      .status21 {
        font-size: 28px;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.5);
        line-height: 44px;
      }
      .status22 {

      }
    }
  }

}


.odBlock {
  background: #FFFFFF;
  border-radius: 16px 16px 16px 16px;
  opacity: 1;
  padding: 24px;
  margin-bottom: 24px;

  .odTitle {
    font-size: 32px;
    font-weight: normal;
    color: rgba(0, 0, 0, 0.8);
    line-height: 48px;
  }

  .odBlock1 {
    display: flex;
    .odBlock1Icon {
      width: 92px;
      height: 112px;
      border-radius: 0px 0px 0px 0px;
      opacity: 1;
    }

    .odBlock1Content {
      margin-right: 24px;
      .odBlock1Content1 {
        font-size: 32px;
        font-weight: 600;
        color: rgba(0, 0, 0, 0.8);
        line-height: 48px;
      }
      .odBlock1Content2 {
        font-size: 28px;
        font-weight: normal;
        color: rgba(0, 0, 0, 0.5);
        line-height: 44px;
      }
    }
  }


  .odInfo {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 10px 0;
    .odInfoLabel {
      font-size: 28px;
      font-weight: normal;
      color: rgba(0, 0, 0, 0.5);
      line-height: 44px;
      white-space: nowrap;
    }

    .odInfoValue {
      font-size: 28px;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.8);
      line-height: 44px;
      text-align: right;
    }
  }


  .odBtnWrap {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-top: 24px;
    border-top: 2px solid #00000008;
    .odBtn {
      padding: 8px 20px;
      background: #FFFFFF;
      border-radius: 8px 8px 8px 8px;
      opacity: 1;
      border: 1px solid rgba(0, 0, 0, 0.2);
      display: flex;
      justify-content: center;
      align-items: center;

      font-size: 28px;
      font-weight: normal;
      line-height: 39px;
    }
  }
}
</style>
